<!--
 * @Author: boyyang
 * @Date: 2022-01-14 14:03:17
 * @LastEditTime: 2022-03-18 22:00:28
 * @LastEditors: boyyang
 * @Description: 倒计时
 * @FilePath: \boyyang\src\components\countDown\index.vue
-->

<template>
    <div class="count-down-wrapper" :style="{ backgroundColor: props.backgroundColor }">
        <div class="count-down-title">{{ props.title }}</div>
        <div class="count-down-content">
            <span class="count-down-num" v-show="_time.isShowDay">{{ _time.day }}</span>
            <span v-show="_time.isShowDay" class="time-unit">天</span>
            <span class="count-down-num">{{ _time.hours }}</span>
            <span class="time-unit">小时</span>
            <span class="count-down-num">{{ _time.min }}</span>
            <span class="time-unit">分钟</span>
            <div class="time-sec">{{ _time.sec }}</div>
            <span class="time-unit">秒</span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { decimalPlaces } from '@/utils/decimalPlaces'
interface ICountDownProps {
    title?: string;
    endTime?: number; //结束时间 时间戳 单位s
    backgroundColor?: string;
}

interface ICountDownTime {
    day?: string | number;
    hours?: string | number;
    min?: string | number;
    sec?: string | number;
    isShowDay?: boolean;
}

const props = withDefaults(defineProps<ICountDownProps>(), {
    title: '距离---还有',
    endTime: 1642155558,
    backgroundColor: 'rgb(0, 0, 0)'

})

let timer = ref<any>(null)
let _time = reactive<ICountDownTime>({
    isShowDay: false
})


onMounted(() => {
    timer.value = setInterval(() => {
        getTime(props.endTime)
    }, 1000)
})

onUnmounted(() => {
    clearInterval(timer.value)
})

const getTime = (endTime?: number) => {
    if (endTime) {
        let time = new Date()
        let nowTimeStamp = Math.floor(time.getTime() / 1000)
        let time_space = endTime - nowTimeStamp
        // 24 * 60 * 60 s  
        let dayS = 24 * 60 * 60
        let hoursS = 60 * 60
        let minS = 60
        let day = Math.floor(time_space / dayS)
        let hours = Math.floor(time_space / hoursS) % 24
        let min = Math.floor(time_space / minS) % 60
        let sec = Math.floor(time_space % 60)
        _time.day = decimalPlaces(day)
        _time.hours = decimalPlaces(hours)
        _time.min = decimalPlaces(min)
        _time.sec = decimalPlaces(sec)
        _time.isShowDay = day > 0 ? true : false
    }
}
</script>

<style scoped lang="scss">
.count-down-wrapper {
    box-sizing: border-box;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    padding: 10px;
}

.count-down-title {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: whitesmoke;
    font-size: 25px;
    font-weight: 700;
}

.count-down-content {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: whitesmoke;
    font-size: 20px;
    font-weight: 900;
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.time-unit {
    margin: 0 5px;
}

.time-sec {
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: colorTrans 1s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;

    @keyframes colorTrans {
        0% {
            color: rgb(255, 255, 255);
            transform: scale(0.5);
        }

        100% {
            color: rgb(189, 34, 129);
            transform: scale(1.5);
        }
    }
}
</style>
